import React from 'react'
import {Link} from 'react-router'
import ReactMixin from 'react-mixin'
import Reflux from 'reflux'
import Action from '../../action/action'
import Store from '../../store/store'

import '../../less/my.less'
import FootNavBar from '../../component/footNavBar/footNavBar'

export default class My extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            userInfo : {},
            userOrder : {},
            userWallet : {},
            couponList : []
        }
    }
    componentDidMount(){
        Action.getUserInfo();
        Action.getUserOrder(()=>{});
        Action.getUserWallet(()=>{
            let _couponList = [];
            this.state.userWallet.couponList.map((obj)=>{
                if(!obj.hasUsed && !obj.hasPass){
                    _couponList.push(obj)
                };
                this.setState({
                    couponList : _couponList
                })
            })
        })
    }

    setNavBarSelectIndex(i){
        Action.setNavBarSelectIndex(i)
    }
    render(){
        let userOrder = this.state.userOrder,
            userInfo = this.state.userInfo,
            couponList = this.state.couponList;
        return(
            <div className="my">
                <header style={{backgroundImage : `url(${userInfo.userBg || ""})`}}>
                    <div>
                        <div style={{backgroundImage : `url(${userInfo.userImage || ""})`}} alt=""></div>
                        <span>{userInfo.userName}</span>
                    </div>
                    <span>
                        <Link to="/my/account">
                            <p>账号管理</p>
                            <i className="iconfont icon-qianjin-copy"></i>
                        </Link>
                    </span>
                </header>
                <section className="myOrder1">
                    <header>
                        <h4>
                            我的订单
                            <Link to="/my/order?0">
                                全部订单
                                <i className="iconfont icon-qianjin-copy"></i>
                            </Link>
                        </h4>
                    </header>
                    <div>
                        <ul>
                            <li onClick={this.setNavBarSelectIndex.bind(this,0)}>
                                <Link to="/my/order?0">
                                    <i className="iconfont icon-fukuan"></i>
                                    <p>待付款</p>
                                </Link>
                                {userOrder.waitPay && userOrder.waitPay.length>0 ? <span>{userOrder.waitPay && userOrder.waitPay.length}</span> : null}
                            </li>
                            <li onClick={this.setNavBarSelectIndex.bind(this,2)}>
                                <Link to="/my/order?2">
                                    <i className="iconfont icon-fahuo"></i>
                                    <p>待收货</p>
                                </Link>
                                {userOrder.waitReceipt && userOrder.waitReceipt.length> 0 ? <span>{userOrder.waitReceipt && userOrder.waitReceipt.length}</span>: null}

                            </li>
                            <li onClick={this.setNavBarSelectIndex.bind(this,3)}>
                                <Link to="/my/order?3">
                                    <i className="iconfont icon-shouhuo"></i>
                                    <p>待自提</p>
                                </Link>
                                {userOrder.waitPick && userOrder.waitPick.length>0 ? <span>{userOrder.waitPick && userOrder.waitPick.length}</span> : null}
                            </li>
                            <li onClick={this.setNavBarSelectIndex.bind(this,4)}>
                                <Link to="/my/order?4">
                                    <i className="iconfont icon-loudou"></i>
                                    <p>待使用</p>
                                </Link>
                                {userOrder.waitUse && userOrder.waitUse.length>0 ? <span>{userOrder.waitUse && userOrder.waitUse.length}</span> : null}
                            </li>
                        </ul>
                    </div>
                </section>

                <section className="myWallet1">
                    <header>
                        <h4>
                            我的钱包
                            <Link to="/my/wallet">
                                查看更多
                                <i className="iconfont icon-qianjin-copy"></i>
                            </Link>
                        </h4>
                    </header>
                    <div>
                        <ul>
                            <li>
                                <Link to="/my/wallet">
                                    <i className="iconfont icon-yue-copy"></i>
                                    <p>余额</p>
                                </Link>

                            </li>
                            <li>
                                <Link to="/my/coupon?0">
                                    <i className="iconfont icon-youhuiquan"></i>
                                    <p>优惠券</p>
                                </Link>
                                {couponList.length > 0 ? <span>{couponList.length}</span> : null }
                            </li>
                            <li>
                                <Link to="/my/cashCoupon">
                                    <i className="iconfont icon-youhuiquan1"></i>
                                    <p>现金券</p>
                                </Link>
                                {/*<span>0</span>*/}
                            </li>

                        </ul>
                    </div>
                </section>

                <section className="myOther">
                    <ul>
                        <li>
                            <Link>
                                <i className="iconfont icon-chanpin"></i>
                                <p>我的宝贝</p>
                            </Link>
                        </li>
                        <li>
                            <Link to="/my/collect">
                                <i className="iconfont icon-guanzhu"></i>
                                <p>我的收藏</p>
                            </Link>
                        </li>
                        <li>
                            <Link to="/my/concern">
                                <i className="iconfont icon-shangbiao"></i>
                                <p>关注商户</p>
                            </Link>
                        </li>
                        <li>
                            <Link>
                                <i className="iconfont icon-share"></i>
                                <p>我的分享</p>
                            </Link>
                        </li>
                        {/*<li>*/}
                            {/*<Link>*/}
                                {/*<i className="iconfont icon-zengsong"></i>*/}
                                {/*<p>转赠好友</p>*/}
                            {/*</Link>*/}
                        {/*</li>*/}
                        <li>
                            <Link>
                                <i className="iconfont icon-duihuan"></i>
                                <p>兑换卡券</p>
                            </Link>
                        </li>

                    </ul>
                </section>
                <FootNavBar navBarIndex={4}/>
            </div>
        )
    }
}
ReactMixin.onClass(My,Reflux.connect(Store));